<template>
    <div class="loginContain">
        <div class="containerHeader">
            <img src="@/assets/logo.png" class="containerHeaderImage" />
            <span class="titleContainer">YWU 一站式应用管理</span>
        </div>
        <div class="containerCard">
            <el-row :gutter="20" v-for="(rowItem, index) in siteInfoList" :key="index" style="margin-bottom: 30px">
                <el-col :span="6" v-for="item in rowItem" :key="item.id">
                    <el-card shadow="hover" class="cardItem" @click="cardClick(item)">
                        <p> {{ item.routeRootCnName }} </p>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import {queryMenuSiteInfo} from "@/request/menu";

export default {
    name: "YwuRouteIndex",
    data() {
        return {
            siteInfoList: []
        }
    },
    methods: {
        cardClick(item) {
            let routePath = item.routeMenuHome;
            if (item.routePathParam) {
                routePath += "?" + item.routePathParam
            }
            // 跳转至路由文根的首页
            this.$router.push(routePath).then(()=>{});
        }
    },
    created() {
        // 查询当前用户下的所有可跳转的站点文根
        let param = {}
        queryMenuSiteInfo(param).then(res => {
            let temp = [];
            temp.push(res.data[0]);
            for (let index = 1; index < res.data.length; index++) {
                if (index % 4 === 0) {
                    this.siteInfoList.push(temp);
                    temp = [];
                }
                temp.push(res.data[index]);
            }
            if (temp.length > 0) {
                this.siteInfoList.push(temp);
            }
        })
    }
}
</script>

<style scoped lang="less">
.loginContain {
    width: 100%;
    height: 100vh;
    background-image: url("@/assets/login/loginBackground.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    //去除光标
    caret-color: transparent;
    .containerHeader {
        width: 100%;
        height: 30%;
        display: flex;
        align-items: center;
        justify-content: center;
        .containerHeaderImage {
            width: 8%;
            height: 45%;
            margin-right: 5%;
        }
        .titleContainer {
            font-size: 34px;
            color: rgb(84, 34, 34);
            font-weight: bold;
        }
    }
    .containerCard {
        width: 60%;
        height: 55%;
        padding-left: 20%;
        padding-right: 20%;
    }
    .cardItem:hover {
        cursor: pointer;
    }
}
</style>